<script setup lang='ts'>
import { ref, onBeforeUnmount, inject } from "vue";
import { SceneObject } from "xbsj-renderer/dist-node/xr-utils";
import BasicProprties from './propertiesMenu/basicProprties/index.vue';
import CoordinateProprties from './propertiesMenu/coordinateProprties/index.vue';
import GeneralProprties from './propertiesMenu/generalProprties/index.vue';
import LocationProprties from './propertiesMenu/locationProprties/index.vue';
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { XbsjEarthUi } from "../../scripts/xbsjEarthUi"

const props = withDefaults(defineProps<{
    treeItem: any;
    propTreeRef: any
}>(), {
});
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi

let propertiesMenu: { name: string, component: string }[] = [];
const currentMenu = ref('GeneralProprties')
const properties = props.treeItem.sceneObject.getESProperties()
const disposer = createVueDisposer(onBeforeUnmount);
const lonLatFormat = toReadonlyVueRef<any>(disposer, [xbsjEarthUi.activeViewer, 'lonLatFormat']);
// console.log(123,lonLatFormat.value);
console.log(properties, 'properties == ')

const { basic, general, coordinate, dataSource, location, style } = properties
const { propTreeRef } = props;

if (basic.length > 0) {
    propertiesMenu.push({
        name: '基本',
        component: 'BasicProprties',
    })
}
if (general.length > 0) {
    propertiesMenu.push({
        name: '通用',
        component: 'GeneralProprties',
    })
}
if (coordinate.length > 0) {
    propertiesMenu.push({
        name: '坐标',
        component: 'CoordinateProprties',
    })
}
if (dataSource.length > 0) {
    propertiesMenu.push({
        name: '数据源',
        component: 'DataSourceProprties',
    })
}
if (location.length > 0) {
    propertiesMenu.push({
        name: '位置',
        component: 'LocationProprties',
    })
}
if (style.length > 0) {
    propertiesMenu.push({
        name: '样式',
        component: 'StyleProprties',
    })
}
const emits = defineEmits<{
    (e: 'callback', params: any & { treeItem: any, propTree: any }): void;
}>();
const callback = (params: any & { treeItem: any }): void => {
    emits('callback', { propTreeRef, ...params });
};
</script>

<template>
    <div class="Property_Panel">
        <div class="Property_header">
            <div class="header_item" v-for="item in propertiesMenu" :key="item.component"
                @click="currentMenu = item.component">
                <span class="header_item_span" :class="currentMenu === item.component ? 'header_active' : ''">{{
                item.name
            }}</span>
            </div>
        </div>
        <div class="Property_content">
            <div v-if="currentMenu === 'BasicProprties'">
                <BasicProprties :properties="basic" :type="treeItem.sceneObject.typeName" :currentMenu="currentMenu"
                    :treeItem="treeItem" @callback="callback" ></BasicProprties>
            </div>
            <div v-if="currentMenu === 'GeneralProprties'">
                <GeneralProprties :properties="general" @callback="callback" :type="treeItem.sceneObject.typeName">
                </GeneralProprties>
            </div>
            <div v-if="currentMenu === 'CoordinateProprties'">
                <CoordinateProprties :properties="coordinate" @callback="callback" :type="treeItem.sceneObject.typeName"
                    >
                </CoordinateProprties>
            </div>
            <div v-if="currentMenu === 'DataSourceProprties'">
                <CoordinateProprties :properties="dataSource" @callback="callback" >
                </CoordinateProprties>
            </div>
            <div v-if="currentMenu === 'LocationProprties'">
                <LocationProprties :properties="location" @callback="callback" :lonLatFormat="lonLatFormat">
                </LocationProprties>
            </div>
            <div v-if="currentMenu === 'StyleProprties'">
                <CoordinateProprties :properties="style" @callback="callback" >
                </CoordinateProprties>
            </div>
        </div>
    </div>
</template>

<style scoped>
.Property_Panel {
    width: 100%;
    height: 100%;
    /* background: rgba(71, 71, 71, 0.8); */
    display: flex;
    flex-direction: column;
}

.Property_header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
}

.header_item {
    flex: 1;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header_item>span {
    display: inline-block;
    height: 100%;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: rgba(230, 230, 230, 1);
    width: 50px;
}

.header_active {
    color: #fff !important;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
}

.header_item:hover .header_item_span {
    color: #fff;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
}

.Property_content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 5px;
    box-sizing: border-box;

}

.Property_content::-webkit-scrollbar {
    width: 3px;
    background-color: rgba(41, 42, 46, 1);
    border-radius: 2px;
}

.Property_content::-webkit-scrollbar-thumb {
    background-color: rgba(183, 183, 183, 1);
    border-radius: 2px;
}
</style>
